/**
 * 登录
 * Created by Administrator on 2017/10/13.
 */
import React from "react";
import { connect } from 'dva';
import { Icon, Flex, Button, Toast } from 'antd-mobile';
import styles from "./index.less";

import IconEmblem from '../../svgs/mine/mySetUp/emblem.svg';
import IconUsername from '../../svgs/login/user.svg';
import IconPassword from '../../svgs/login/password.svg';

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      screenHeight: 0, // 屏幕高度
      devicePixelRatio: 1, // 设备像素比
      username: '',
      password: '',
    };
  }

  // == 生命周期 -- 组件将要加载
  componentWillMount() {
    this.setState({
      screenHeight: window.screen.height,
      devicePixelRatio: window.devicePixelRatio
    });
  }

  onSubmit = () => {
    const { username, password } = this.state;
    if (!username) {
      Toast.fail('用户姓名不能为空', 1);
      return;
    }
    if (!password) {
      Toast.fail('密码不能为空', 1);
      return;
    }
    this.props.dispatch({
      type: 'login/fetch',
      payload: {
        username,
        password,
      }
    });
  };

  handleUsernameChange = (e) => {
    if (e) {
      e.preventDefault();
      this.setState({
        username: e.target.value,
      });
    }
  }

  handlePasswordChange = (e) => {
    if (e) {
      e.preventDefault();
      this.setState({
        password: e.target.value,
      });
    }
  }

  handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      this.onSubmit(e);
    }
  }

  // 声明周期 -- 页面渲染
  render() {
    return (
      <div className={styles.login}>
        <div className={styles.emblemBox}>
          <div className={styles.emblemImg}>
            <Icon type={IconEmblem} size="lg" color="#f8c400" className={styles.emblemIcon} />
          </div>
          <div className={styles.emblemTitle}>
            重庆机场集团党建平台
          </div>
        </div>

        <div className={styles.inputBox}>
          <Flex justify="start" align="center" className={styles.inputItem} style={{ borderBottom: "0.005rem solid #fff" }}>
            <Icon type={IconUsername} size="md" className={styles.inputIcon} />
            <input
              className={styles.inputPoint}
              name="username"
              placeholder="账号或手机号登录"
              onChange={(e) => { this.handleUsernameChange(e); }}
              value={this.state.username}
            />
          </Flex>
          <Flex justify="start" align="center" className={styles.inputItem}>
            <Icon type={IconPassword} size="md" className={styles.inputIcon} />
            <input
              className={styles.inputPoint}
              name="password"
              type="password"
              placeholder="请输入登录密码"
              onChange={(e) => { this.handlePasswordChange(e); }}
              value={this.state.password}
              onKeyDown={(e) => { this.handleKeyDown(e); }}
            />
          </Flex>
          <Button className={styles.submit} onClick={this.onSubmit}>登录</Button>
        </div>
      </div>
    );
  }
}

function mapStateToProps({ login }) {
  return { login };
}

export default connect(mapStateToProps)(Login);
